﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/vue/vue.js"></script>
    <script src="~/element-ui/index.js"></script>
    <link href="~/element-ui/theme-chalk/index.css" rel="stylesheet" />
    <script src="~/vue/vue-resource.js"></script>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Index1</title>
</head>
<body>
    <div id="app" style="height:100%">
        <el-container>
            <el-header style="text-align: right; font-size: 12px;background-color:#545c64">
                <el-menu mode="horizontal" background-color="#545c64">
                    <el-menu-item>
                        <img src="~/Img/silvon-inc-20-240.png" style="width:50px;height:50px" />
                        <a style="font-size:30px;color:white">商城管理后台</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white" href="/community/index">商品</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a href="/Order/Index" style="font-size:20px;color:white">订单</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white" href="/User/Index">用户</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white" href="/Promotions/Index">促销</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white" href="/MvcController1/Index1">权限</a>
                    </el-menu-item>
                </el-menu>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu default-active="2"
                             class="el-menu-vertical-demo"
                             background-color="#545c64"
                             text-color="#fff"
                             style="height:860px"
                             active-text-color="#ffd04b">
                        <a href="/MvcController1/Index2"><el-menu-item index="1-1">角色管理</el-menu-item></a>
                        <a href="/MvcController1/Index1"><el-menu-item index="1-2">成员管理</el-menu-item></a>
                    </el-menu>
                </el-aside>
                <el-main>
                    <el-form :inline="true" :model="search" class="demo-form-inline">
                        <el-form-item label="用户名">
                            <el-input v-model="search.AccountName" placeholder="用户名"></el-input>
                        </el-form-item>
                        <el-form-item label="角色">
                            <el-select v-model="search.Pid" clearable placeholder="请选择角色">
                                <el-option v-for="item in options"
                                           :key="item.pid"
                                           :label="item.positionName"
                                           :value="item.pid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="onSearch">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @@click="AddEmp">添加</el-button>
                        </el-form-item>
                    </el-form>
                    @*添加弹出框*@
                    <el-dialog title="添加成员信息"
                               :visible.sync="dialogVisible"
                               width="30%"
                               center
                               @@close="resetForm('AddEmployee')">
                        <el-form :model="AddEmployee" label-width="80px" :rules="rules" ref="AddEmployee" class="demo-AddEmployee">
                            <el-form-item label="成员账号" prop="employeeAccount">
                                <el-input v-model="AddEmployee.employeeAccount"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名" prop="employeeName">
                                <el-input v-model="AddEmployee.employeeName"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号" prop="employeePhone">
                                <el-input v-model="AddEmployee.employeePhone"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="AddEmployee.email"></el-input>
                            </el-form-item>
                            <el-form-item label="性别" prop="sex">
                                <el-radio-group v-model="AddEmployee.sex">
                                    <el-radio label="男"></el-radio>
                                    <el-radio label="女"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="角色" prop="pid">
                                <el-select v-model="AddEmployee.pid" clearable placeholder="请选择角色">
                                    <el-option v-for="item in options"
                                               :key="item.pid"
                                               :label="item.positionName"
                                               :value="item.pid">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="登录密码" prop="passWords">
                                <el-input type="password" v-model="AddEmployee.passWords"></el-input>
                            </el-form-item>
                            <el-form-item label="备注信息" prop="remarkMessage">
                                <el-input type="textarea" v-model="AddEmployee.remarkMessage"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button @@click="dialogVisible = false">取 消</el-button>
                                <el-button type="primary" @@click="submitForm('AddEmployee')">确 定</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                    @*修改表单弹框*@
                    <el-dialog title="修改成员信息"
                               :visible.sync="dialogVisible1"
                               width="30%"
                               center
                               @@close="resetForm('EditEmployee')">
                        <el-form :model="EditEmployee" label-width="80px" :rules="rules" ref="EditEmployee" class="demo-EditEmployee">
                            <el-form-item label="成员账号" prop="employeeAccount">
                                <el-input v-model="EditEmployee.employeeAccount"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名" prop="employeeName">
                                <el-input v-model="EditEmployee.employeeName"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号" prop="employeePhone">
                                <el-input v-model="EditEmployee.employeePhone"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="EditEmployee.email"></el-input>
                            </el-form-item>
                            <el-form-item label="性别" prop="sex">
                                <el-radio-group v-model="EditEmployee.sex">
                                    <el-radio label="男"></el-radio>
                                    <el-radio label="女"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="角色" prop="pid">
                                <el-select v-model="EditEmployee.pid" clearable placeholder="请选择角色">
                                    <el-option v-for="item in options"
                                               :key="item.pid"
                                               :label="item.positionName"
                                               :value="item.pid">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="登录密码" prop="passWords">
                                <el-input type="password" v-model="EditEmployee.passWords"></el-input>
                            </el-form-item>
                            <el-form-item label="备注信息" prop="remarkMessage">
                                <el-input type="textarea" v-model="EditEmployee.remarkMessage"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button @@click="dialogVisible1 = false">取 消</el-button>
                                <el-button type="primary" @@click="submitForm1('EditEmployee')">确 定</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                    @* 数据网格 *@
                    <div>
                        <el-table :data="tableData"
                                  border
                                  style="width: 100%"
                                  @@selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55">

                            </el-table-column>
                            <el-table-column prop="employeeId"
                                             label="序号"
                                             width="180">
                            </el-table-column>
                            <el-table-column prop="employeeAccount"
                                             label="成员账号"
                                             width="180">
                            </el-table-column>
                            <el-table-column prop="employeeName"
                                             label="姓名"
                                             width="180">
                            </el-table-column>
                            <el-table-column prop="employeePhone"
                                             label="手机号"
                                             width="180">
                            </el-table-column>
                            <el-table-column prop="email"
                                             label="邮箱"
                                             width="180">
                            </el-table-column>
                            <el-table-column prop="positionName"
                                             label="角色"
                                             width="180">
                            </el-table-column>
                            <el-table-column prop="registerTime"
                                             label="最近登陆时间"
                                             width="180">
                                <template slot-scope="scope">
                                    <span>{{scope.row.registerTime.replace("T"," ")}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="states"
                                             label="是否启用"
                                             width="180">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.states==1">启用</span>
                                    <span v-else="">禁用</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini"
                                               type="primary"
                                               v-on:click="Edit(scope.$index, scope.row)">编辑</el-button>
                                    <el-button size="mini"
                                               type="danger"
                                               v-on:click="Delete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                    </div>
                    @*分页*@

                    <el-pagination class="mpage" :model="current"
                                   background
                                   @@size-change="handlesizechange" @*修改显示条数触发事件*@
                                   @@current-change="handleCurrentChange"
                                   :current-page="current.currentPage"
                                   :page-sizes="[2, 4, 6]"
                                   :page-size="current.pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="current.total">
                    </el-pagination>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <style>
        /*去掉a标签的下划线*/
        a {
            color: black;
            text-decoration: none;
        }
    </style>
    <script type="text/javascript">

    new Vue({
        el: "#app",
        data() {
            return {
                tableData: [],
                options: [],
                value: '1',
                //查询
                search: {
                    AccountName: '',
                    Pid: ''
                },
                //添加
                AddEmployee: {
                    employeeAccount: '',
                    employeeName: '',
                    employeePhone: '',
                    email: '',
                    sex: '男',
                    passWords: '',
                    remarkMessage: '',
                    pid: ''
                },
                //修改
                EditEmployee: {
                    employeeId: '',
                    employeeAccount: '',
                    employeeName: '',
                    employeePhone: '',
                    email: '',
                    sex: '',
                    passWords: '',
                    remarkMessage: '',
                    pid: ''
                },
                dialogVisible: false,
                dialogVisible1: false,
                rules: {
                    employeeAccount: [
                        { required: true, message: '（不能为空,建议使用邮箱或手机号作为成员账号）', trigger: 'blur' },
                    ],
                    employeeName: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    employeePhone: [
                        { required: true, message: '手机号不能为空', trigger: 'blur' },
                        { min: 11, max: 11, message: '手机号格式不正确', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '邮箱不能为空', trigger: 'blur' }
                    ],
                    pid: [
                        { required: true, message: '角色不能为空', trigger: 'change' }
                    ],
                    passWords: [
                        { required: true, message: '密码不能为空', trigger: 'blur' }
                    ]
                },
                current: {
                    currentPage: 1,
                    pageSize: 2,
                    total: 0
                }
            }
        },
        //首次加载
        created: function () {
            this.getData();//显示数据
            this.getOption();//获取下拉框数据
        },
        methods: {
            //显示数据
            getData() {
                var url = 'http://localhost:62874/api/Login/GetEmployee';
                axios.get(url, { params: { AccountName: this.search.AccountName, Pid: this.search.Pid, PageIndex: this.current.currentPage, PageSize: this.current.pageSize } })
                    .then(response => {
                        this.tableData = response.data.data;
                        this.current.total = response.data.total;
                    }).catch(error => {
                        console.log(error);
                    })
            },
            //获取下拉框数据
            getOption() {
                var url = 'http://localhost:62874/api/Login/GetPoi';
                axios.get(url, {})
                    .then(response => {
                        this.options = response.data;
                    }).catch(error => {
                        console.log(error);
                    })
            },
            //验证数据并提交数据
            submitForm(AddEmployee) {
                this.$refs[AddEmployee].validate((valid) => {
                    if (valid) {
                        axios({
                            url: 'http://localhost:62874/api/Login/AddEmployee',
                            method: 'post',
                            data: JSON.stringify(this.AddEmployee),
                            headers: {
                                'Content-type': 'application/json'
                            }
                        }).then(response => {
                            if (response.data > 0) {
                                this.dialogVisible = false;
                                this.$message.success("添加成功!");
                                this.getData();
                            }
                            else {
                                this.dialogVisible = false;
                                this.$message.success("添加失败!");
                            }
                        }).catch(error => {
                            console.log(error)
                        })
                    } else {

                        return false;
                    }
                });
            },
            //反填数据
            Edit(index, row) {
                this.dialogVisible1 = true;
                this.EditEmployee = row;
            },
            //验证数据并修改数据
            submitForm1(EditEmployee) {
                this.$refs[EditEmployee].validate((valid) => {
                    if (valid) {
                        axios({
                            url: 'http://localhost:62874/api/Login/Edit',
                            method: 'put',
                            data: JSON.stringify(this.EditEmployee),
                            headers: {
                                'Content-type': 'application/json'
                            }
                        }).then(response => {
                            if (response.data > 0) {
                                this.dialogVisible1 = false;
                                this.$message.success("修改成功!");
                                this.getData();
                            }
                            else {
                                this.dialogVisible1 = false;
                                this.$message.success("修改失败!");
                            }
                        }).catch(error => {
                            console.log(error)
                        })
                    } else {

                        return false;
                    }

                });

            },
            //删除数据
            Delete(index, row) {
                this.$confirm('您确定是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    //var url = 'http://localhost:62874/api/Login/Delete';
                    //this.$http.delete(url, { params: { id: row.employeeId } }).then(function (result) {
                    //    if (result.data > 0) {
                    //        this.$message.success("删除成功!");
                    //        this.getData();
                    //    }
                    //    else {
                    //        this.$message.success("删除失败!");
                    //    }
                    //});
                    var url = 'http://localhost:62874/api/Login/Delete';
                    axios.delete(url, { params: { id: row.employeeId } })
                        .then(response => {
                            if (response.data > 0) {
                                this.$message.success("删除成功!");
                                this.getData();
                            }
                            else {
                                this.$message.success("删除失败!");
                            }
                        }).catch(error => {
                            console.log(error);
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            //将表单数据重置为初始值
            resetForm(AddEmployee) {
                this.$refs[AddEmployee].resetFields();
            },
            //打开弹出框
            AddEmp() {
                this.dialogVisible = true;
            },
            //查询再次调用显示方法
            onSearch() {
                this.getData();
            },
            //多选
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //显示条数
            handleSizeChange(val) {
                this.current.pageSize = val;
                this.getData();
            },
            //第几页
            handleCurrentChange(val) {
                this.current.currentPage = val;
                this.getData();
            },
        }
    })
    </script>
</body>
</html>
